<!-- App.vue -->
<script setup>
import { provide, ref } from 'vue';
import roomMsgItem from './components/room-msg-item.vue';

  // 组件嵌套关系
  // room-page -> room-msg-item -> room-msg-comment
  // 1. 顶层组件提供静态数据
  const msg = '---这是top顶层组件的数据'
  provide('room-msg', msg)

  // 2. 顶层传递响应式数据
  const count = ref(0)
  provide('room-count', count)
  setTimeout(() => {
    count.value = 3000
  }, 3000)

  // 3. 顶层传递函数
  const setCount = () => {
    count.value++
  }
  provide('set-count', setCount)

</script>

<template>
  <div class="page">
    顶层组件
    <!-- 循环渲染 -->
    <roomMsgItem />
  </div>
</template>

<style>
  .father{
    width: 600px;
    height: 400px;
    margin: 0 auto;
    padding: 0 auto;
    /* text-align: center; */
    background-color: rgb(137, 135, 135);
  }
</style>
